import React, { useState, useEffect } from 'react'
// 自定义hooks，以 use开头的小驼峰命名
function useName () {
  const [ name, setName ] = useState('')
  useEffect(() => {
    setName(localStorage.getItem('name'))
  }, [])
  return name
}

function First () {
  const name = useName()
  return (
    <div>
      first - { name }
    </div>
  )
}
function Second () {
  const name = useName()
  return (
    <div>
      Second - { name }
    </div>
  )
}
function Third () {
  const name = useName()
  return (
    <div>
      Third - { name }
    </div>
  )
}
function App() {
  return (
    <div>
      <First />
      <Second />
      <Third />
    </div>
  )
}

export default App
